<script>
export default {
  data() {
    return {
      // 模拟网络请求获得的响应数据
      netResponse: [
        {
          "title": "星空之梦",
          "content": "夜幕降临，星空如梦似幻，繁星点点，仿佛是天空的精灵在低语。在这无垠的宇宙中，每一颗星星都承载着一段美丽的传说，让人沉醉在这无尽的幻想之中。"
        },
        {
          "title": "花海漫步",
          "content": "春风拂过，花海泛起层层涟漪，五彩斑斓的花朵在阳光下绽放，散发出迷人的芬芳。漫步在这片花海中，仿佛置身于一个梦幻的童话世界，让人心旷神怡。"
        },
        {
          "title": "月光下的誓言",
          "content": "月光如水，静静地洒在大地之上，仿佛为世界披上了一层神秘的面纱。在这静谧的夜晚，许下永恒的誓言，让爱情在月光下绽放出最美丽的光芒。"
        },
        {
          "title": "晨曦中的希望",
          "content": "晨曦初现，天边泛起一抹淡淡的金色，新的一天在希望的曙光中悄然开始。每一缕阳光都充满了生机与活力，让人对未来充满了无限的期待和憧憬。"
        }
      ]
    }
  },
  mounted() {
    // $ref 表示获取组件的DOM元素
    console.log(this.$refs.name);
  }
}
</script>

<!-- 
声明周期函数：
  1. 创建阶段
    beforeCreate
    created
  2. 挂载阶段
    beforeMount
    mounted
  3. 更新阶段
    beforeUpdate
    updated
  4. 销毁阶段
    beforeUnmount
    unmounted
-->

<template>
  <h1>组件生命周期的应用</h1>
  <p>下面的文字是需要需要等待组件被挂载之后，才可以读取到的，因此需要在 mounted 阶段处理。在此阶段之前的任何阶段都是无法读取的。</p>
  <p ref="name">Hello, World!</p>

  <hr>

  <p>在 data 中返回的数据，是属于创建状态阶段的。</p>
  <p>当返回数据之前，处于 beforeCreate，当返回数据后，处于 created。</p>
  <p>因此，在 data 中获取的数据，可以在 created 阶段后获取，这可以模拟获取到网络请求的响应数据的场景，一旦响应被接收到，就视为数据被创建了。</p>
  <p>但实际上，很多网站的“数据”的重要性要小于“组件渲染”的重要性，因为当数据没有获取之前，页面的结构允许已经被渲染完成，就像本身数据需要被放到一个方格一个方格中，允许先将自己的页面的方格 css
    或者其他结构渲染到页面上，处于一种等待数据获得后放到这里的意图，增加用户体验。</p>
  <p>因此，我们在实际开发中，还是把数据的获取后的处理的逻辑，放到 mounted 阶段，而不是 created 阶段。</p>

  <div style="background-color: #7fdeff;">
    <ul>
      <li v-for="item of netResponse" :key="item.title">
        <h3>{{ item.title }}</h3>
        <p>{{ item.content }}</p>
      </li>
    </ul>
  </div>
</template>

<style scoped></style>